<!DOCTYPE HTML>
<html>  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Notes</title>  
  <link type="text/css" href="css/flick/jquery-ui-1.8.7.custom.css" rel="stylesheet" />	
  <link type="text/css" href="css/organiser.css" rel="stylesheet" />  
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
  <script type="text/javascript" src="js/vAlign.js"></script>
  <script type="text/javascript" src="js/json.js"></script>

<script type="text/javascript">

activeItems = [];
newItemText = $('<input id="new_item" type="text" />')
                .val('New item...')
                .focus(function() {
                  $(this).select();
                  $(this).css('color','black');
                })
                .blur(function() {
                  $(this).val('New item...');
                  $(this).css('color','gray');
                })
                .keyup(function(e) {
                  if(e.keyCode != 13 || $(this).val().length==0) return;
                  
                  item = createItem($(this).val());
                  $(this).before(item).val('');
                  item.children().each(function() {
                    $(this).vAlign();
                  });
                  e.stopPropagation();
                });
 
function getLevel(panel) {
  return panel.prevAll('.panel').length;
}
 
function getActiveItem(index) {
  return activeItems[index];
}

function updateActiveItems(length, index, itemId) {
  if(length != null) { 
    activeItems.length = length; 
  } else if(index != null) {
    activeItems[index] = itemId; 
  }

  var str = 'activeItems: ';
  for(var i=0; i<activeItems.length; i++) {
    str += activeItems[i] + ',';
  }
  status(str);
}

function updateHighlights() {
  $('.item').each(function() {
  	$(this).removeClass('item_hl');
  })
  $.each(activeItems, function(index, value) {
   $('#'+value).addClass('item_hl');
  });
  $('.panel:last').css('background-color', '#DDFFDD').prevAll('.panel').css('background-color', 'white');
}

function createIcon(type, itemId) {
  var li = $("<li>").addClass("ui-state-default ui-corner-all")
  li.attr('id', itemId + '_' + type);
  li.mousedown(function(e) {
    e.stopPropagation();
  });
  li.mouseup(function(e) {
    e.stopPropagation();
  });
  return li.append($("<span>").addClass("ui-icon ui-icon-" + type));
}

function createIconTray(itemId) {
  var ul = $("<ul>").addClass("ui-widget ui-helper-clearfix icons");
  ul.append(createIcon('flag', itemId))
    .append(createIcon('pin-w', itemId))
    .append(createIcon('trash', itemId))
    .append(createIcon('calendar', itemId))
    .append(createIcon('clock', itemId))
    .append(createIcon('check', itemId))
    .append(createIcon('print', itemId))
    .append(createIcon('note', itemId))
    .append(createIcon('triangle-1-e', itemId));
  ul.children($('li')).hover(
    function() { $(this).addClass('ui-state-hover'); }, 
    function() {
			if (!$(this).hasClass('on')) {
				$(this).removeClass('ui-state-hover');
			}
		}	
	).click(
    function(e) {
      e.stopPropagation(); 
      thisIndex = $(this).parents('.panel').prevAll('.panel').length;
      id = $(this).attr('id');
      type = id.substring(id.indexOf('_')+1);
      switch(type) {
      case 'pin-w':
        var span = $(this).children('span'); 
        if(span.hasClass('ui-icon-pin-w')) {
          span.removeClass('ui-icon-pin-w');
          span.addClass('ui-icon-pin-s');
        } else {
          span.removeClass('ui-icon-pin-s');
          span.addClass('ui-icon-pin-w');
        }
				break;
      case 'triangle-1-e':
		  	if (getActiveItem(thisIndex) != itemId) {
		  		clicked = $(this);
		  		hidePanel(clicked.parents('.panel'), function(){
		  			updateActiveItems(null, thisIndex, itemId);
		  			showPanel(clicked);
		  		});
		  	} else {
					hidePanel(clicked.parents('.panel'));
					
				}
				break;
			case 'flag':
			  break;
			case 'check':
			  break;
      }
			switch(type) {
				case 'triangle-1-e':
				case 'pin-w':
				case 'flag':
				case 'check': 
	        if ($(this).hasClass('on')) {
	          $(this).removeClass('on');
	        } else {
	          $(this).addClass('on');
	        }
				break;
			}
    }
  );
	return ul;
}

function createItem(text) {
  var item = $('<div>').attr('id', text);
  item.addClass('item');
  item.prepend($('<span>').addClass('text').text(text));
  item.click(function() {
    $(this).find('#'+$(this).attr('id')+'_triangle-1-e').click();
  });
  
  item.append(createIconTray(item.attr('id')));
  item.hover(function() {
    $(this).addClass('item_hover');
    $(this).find('.icons li').stop(true, true).animate({opacity: 0.9}, 200);
  },
  function() {
		if (!$(this).find('li').hasClass('on')) {
			$(this).removeClass('item_hover');
			$(this).find('.icons li').stop(true, true).animate({ opacity: 0	}, 200);
		}
  });
  item.mousedown(function() {
    $(this).addClass('item_active');
  });
  item.mouseup(function() {
    $(this).removeClass('item_active');
  });
  return item;
}

function createPanel() {
  var newPanel = $('<div>').addClass('panel');
  newPanel.append($('<div>^^^</div>').addClass('item_scroll_up'));
  var itemContainer = $('<div>').addClass('item_container').appendTo(newPanel);
  itemContainer.append(newItemText);
  newPanel.append($('<div>vvv</div>').addClass('item_scroll_down'));

  newPanel.focus(function() {
          //TODO: onFocus
        });
  return newPanel;   
}

function showPanel(initItem) {
  var newPanel = setupPanel(createPanel().appendTo(document.body));
  if(initItem) {
    var prevPanel = initItem.parents('.panel');
    newPanel.css('left', prevPanel.position().left);
    newPanel.css('z-index', prevPanel.css('z-index')-1);
    newLeft = prevPanel.position().left + prevPanel.width() + 6;
    newPanel.animate({'left': newLeft});
    var extraWidth = newLeft + newPanel.width() - $(window).width();
    if(extraWidth > 0) {
      $('html, body').animate({scrollLeft: extraWidth});
    }
  } else {
    newPanel.css('z-index', 100);
  }
  updateHighlights();
  newItemText.focus();
  return newPanel;
}

function hidePanel(prevPanel, callback) {
  prevPanel.nextAll('.panel').each(function() {
    $(this).animate({'left': prevPanel.position().left, opacity:0},
                     null, null, function() {
		  $(this).remove();
			updateHighlights();
		})
  });
  if(prevPanel) {
    prevPanel.children('.item_container').append(newItemText);
    newItemText.focus();
    updateActiveItems(prevPanel.prevAll('.panel').length);
  } else {
    updateActiveItems(0);
  }
  if (callback) {
  	callback();
  }
}

function setupPanel(panel) {
  panel.children('.item_scroll_up').click(function() {
    var con = panel.children('.item_container');
    con.animate({scrollTop: con.scrollTop()-con.height()}, 600);
  });
  panel.children('.item_scroll_down').click(function() {
    var con = panel.children('.item_container');
    con.animate({scrollTop: con.scrollTop()+con.height()}, 600);
  });
  return panel;
}

$(document).ready(function() {
  showPanel();
  
  $(this).keyup(function(e) {
    if(e.keyCode == 27 && activeItems.length>0) {
      hidePanel($('.panel:last').prev('.panel'));
    }
  });
});

function status(str) {
	$('#status').text(str);
}
</script>  
</head>  
  
<body><div id='status'></div></body>
</html>
